{% extends 'base/base.html'%}
{%load filters%}
<!-- 标题 -->
{% block title %}
<title>给点知识-我的笔记</title>
{% endblock title %}
<!-- 内容 -->

{% block content %}
{% autoescape off %}
<div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
        <div class="row">
            <div class="col-sm-12">
                <div class="card border-danger">
                    <div class="card-header">精华原理</div>
                    <ul class="list-group list-group-flush">
                        <div class="list-group">
                            <div  class="list-group-item list-group-item-action" style="background-color:#ccc">
                                <div class="row">
                                    <div class="col-sm-1">
                                        <span>编号</span>
                                    </div>
                                    <div class="col-sm-5">
                                        <small>标题</small>
                                    </div>
                                    <div class="col-sm-2">
                                        <small>描述</small>
                                    </div>
                                    <div class="col-sm-2 ">
                                        <small>统计信息</small>
                                    </div>
                                    <div class="col-sm-2">
                                        <small>更新时间</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {%if notes%}
                            {%for note in notes%}
                            <div class="list-group">
                                <a href="{% url 'note_detail' id=note.id%}" class="list-group-item list-group-item-action">
                                    <div class="row">
                                        <div class="col-sm-1">
                                            <span class="badge badge-{{forloop.counter | tag_style}}">{{forloop.counter}} </span>
                                        </div>
                                        <div class="col-sm-5 text-truncate">
                                            <small>{{note.title}}</small>
                                        </div>
                                        <div class="col-sm-2 text-truncate">
                                            <small>{{note.describe}}</small>
                                        </div>
                                        <div class="col-sm-2 ">
                                            <span class="badge badge-info">
                                                <i class="bi bi-hand-thumbs-up"></i>{{note.likes}}
                                            </span>
                                            <span class="badge badge-info">
                                                <i class="bi bi-star-fill"></i>{{note.collections}}
                                            </span>
                                            <span class="badge badge-info">
                                                <i class="bi bi-eye"></i>{{note.reading}}
                                            </span>
                                        </div>
                                        <div class="col-sm-2 text-truncate">
                                            <small>{{note.update_time}}</small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            {% endfor %}
                        {%else%}<div class="list-group">
                            <div  class="list-group-item list-group-item-action text-center">
                                暂无数据
                            </div>
                        </div>
                        {%endif%}
                    </ul>
                    <div class="card-body"></div>
                  </div>
                  
            </div>
        </div>
    </div>
    <div class="col-sm-3"></div>
</div>
{% endautoescape %}
{% endblock content %}